<template>
    <view>
        <uni-segmented-control :current="menuIndex" :values="menuItems" style-type="text" active-color="#007aff" @clickItem="onClickItem" />

        <view v-if="menuIndex === 0">
            <view v-if="waitingPayOrders.length > 0" style="margin-top: 10px">
                <uni-card v-for="(item, index) in waitingPayOrders" :is-shadow="false" :is-full="true" padding="0" margin="0">
                    <template v-slot:title>
                        <view style="display: flex; justify-content: space-between; font-size: 11px; padding: 10px 0">
                            <view
                                ><uni-tag :mark="true" :text="item.soGrou === true ? item?.soItin?.giGrpe + '人团' : '单购'" type="error" :circle="true" size="small" /> 订单编号：{{ item.soNumb }}
                            </view>
                            <view><uni-tag :inverted="true" text="待支付" type="warning" size="small" /></view>
                        </view>
                    </template>
                    <view style="display: flex; height: auto; padding: 0">
                        <view style="width: 100px; position: relative">
                            <image style="width: 90px; height: 90px" :src="item.soItin?.giPrph ? getActivityItemImage(item.soItin?.giPrph) : tempImageUrl"></image>
                        </view>
                        <view style="flex: 1">
                            <view style="height: 40px; font-weight: 600; font-size: 14px">{{ item.soItin?.giName }}</view>
                            <!-- <uni-tag :text="item?.giGrpe + '人团'" type="error" :circle="true" size="small" /> -->
                            <view style="display: flex">
                                <view style="flex: 1; justify-content: space-between">
                                    <text style="color: red; font-weight: 800; font-size: 16px">￥{{ item.soPric || 0 }}</text>
                                    <text v-if="item.soDisc > 0" style="color: #ee0a24; font-size: 11px; margin-left: 10px">(已优惠￥{{ item.soDisc || 0 }}元)</text>
                                </view>
                                <view>x 1</view>
                            </view>
                            <view v-if="item.soGrou === true" style="display: flex">
                                <!-- <uni-tag :text="item?.soItin?.giGrpe + '人团'" type="error" :circle="true" size="small" /> -->
                                <uni-tag v-if="item?.group?.ggStat === true" text="已成团" type="success" size="small" />
                                <uni-tag v-if="item?.group?.ggStat === false" text="未成团" type="warning" size="small" />
                            </view>

                            <view style="text-align: right; display: flex; justify-content: space-between">
                                <view></view>
                                <view style="display: flex; margin-top: 15px; margin-bottom: 10px">
                                    <u-button plain hairline size="small" type="error" text="取消订单" @click="cancelOrder(item)"></u-button>
                                    <u-button plain hairline size="small" type="primary" text="订单详情" style="margin-left: 10px" @click="gotoToOrders(item.soUuid)"></u-button>
                                    <u-button plain hairline size="small" type="success" text="订单支付" @click="submitOrder(item)" style="margin-left: 10px"></u-button>
                                </view>
                            </view>
                        </view>
                    </view>
                </uni-card>
            </view>
            <u-empty v-if="waitingPayOrders.length === 0" text="暂无订单信息"> </u-empty>
        </view>

        <view v-if="menuIndex === 1">
            <view v-if="payOrders.length > 0" style="margin-top: 10px">
                <uni-card v-for="(item, index) in payOrders" :is-shadow="false" :is-full="true" padding="0" margin="0">
                    <template v-slot:title>
                        <view style="display: flex; justify-content: space-between; font-size: 11px; padding: 10px 0">
                            <view
                                ><uni-tag :mark="true" :text="item.soGrou === true ? item?.soItin?.giGrpe + '人团' : '单购'" type="error" :circle="true" size="small" /> 订单编号：{{ item.soNumb }}
                            </view>
                            <view><uni-tag :inverted="true" text="已支付" type="warning" size="small" /></view>
                        </view>
                    </template>
                    <view style="display: flex; height: auto; padding: 0">
                        <view style="width: 100px; position: relative">
                            <image style="width: 90px; height: 90px" :src="item.soItin?.giPrph ? getActivityItemImage(item.soItin?.giPrph) : tempImageUrl"></image>
                        </view>
                        <view style="flex: 1">
                            <view style="height: 40px; font-weight: 600; font-size: 14px">{{ item.soItin?.giName }}</view>
                            <view style="display: flex">
                                <view style="flex: 1; justify-content: space-between">
                                    <text style="color: red; font-weight: 800; font-size: 16px">￥{{ item.soPric || 0 }}</text>
                                    <text v-if="item.soDisc > 0" style="color: #ee0a24; font-size: 11px; margin-left: 10px">(已优惠￥{{ item.soDisc || 0 }}元)</text>
                                </view>
                                <view>x 1</view>
                            </view>
                            <view v-if="item.soGrou === true" style="display: flex">
                                <!-- <uni-tag :text="item?.soItin?.giGrpe + '人团'" type="error" size="small" :circle="true" /> -->
                                <uni-tag v-if="item?.group?.ggStat === true" text="已成团" type="success" size="small" />
                                <uni-tag v-if="item?.group?.ggStat === false" text="未成团" type="warning" size="small" />
                            </view>
                            <view style="text-align: right; display: flex; justify-content: space-between">
                                <view></view>
                                <view style="display: flex; margin-top: 15px; margin-bottom: 10px">
                                    <u-button
                                        v-if="item.soGrou === true && item?.group?.ggStat !== true"
                                        plain
                                        hairline
                                        size="small"
                                        type="warning"
                                        text="去分享"
                                        @click="gotoShare(item?.soItem, item.group?.ggUuid)"
                                    ></u-button>
                                    <u-button plain hairline size="small" type="primary" text="订单详情" style="margin-left: 10px" @click="gotoToOrders(item.soUuid)"></u-button>
                                </view>
                            </view>
                        </view>
                    </view>
                </uni-card>
            </view>
            <u-empty v-if="payOrders.length === 0" text="暂无订单信息"> </u-empty>
        </view>

        <view v-if="menuIndex === 2">
            <view v-if="canceledOrders.length > 0" style="margin-top: 10px">
                <uni-card v-for="(item, index) in canceledOrders" :is-shadow="false" :is-full="true" padding="0" margin="0">
                    <template v-slot:title>
                        <view style="display: flex; justify-content: space-between; font-size: 11px; padding: 10px 0">
                            <view
                                ><uni-tag :mark="true" :text="item.soGrou === true ? item?.soItin?.giGrpe + '人团' : '单购'" type="error" :circle="true" size="small" /> 订单编号：{{ item.soNumb }}
                            </view>
                            <view><uni-tag :inverted="true" text="已取消" type="warning" size="small" /></view>
                        </view>
                    </template>
                    <view style="display: flex; height: auto; padding: 0">
                        <view style="width: 100px; position: relative">
                            <image style="width: 90px; height: 90px" :src="item.soItin?.giPrph ? getActivityItemImage(item.soItin?.giPrph) : tempImageUrl"></image>
                        </view>
                        <view style="flex: 1">
                            <view style="height: 40px; font-weight: 600; font-size: 14px">{{ item.soItin?.giName }}</view>
                            <view style="display: flex">
                                <view style="flex: 1; justify-content: space-between">
                                    <text style="color: red; font-weight: 800; font-size: 16px">￥{{ item.soPric || 0 }}</text>
                                    <text v-if="item.soDisc > 0" style="color: #ee0a24; font-size: 11px; margin-left: 10px">(已优惠￥{{ item.soDisc || 0 }}元)</text>
                                </view>
                                <view>x 1</view>
                            </view>
                            <view style="text-align: right; display: flex; justify-content: space-between">
                                <view></view>
                                <view style="display: flex; margin-top: 15px; margin-bottom: 10px">
                                    <u-button plain hairline size="small" type="error" text="删除订单" @click="deleteOrder(item)"></u-button>
                                    <u-button plain hairline size="small" type="primary" text="订单详情" style="margin-left: 10px" @click="gotoToOrders(item.soUuid)"></u-button>
                                </view>
                            </view>
                        </view>
                    </view>
                </uni-card>
            </view>
            <u-empty v-if="canceledOrders.length === 0" text="暂无订单信息"> </u-empty>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getOrderByCiUuid, cancelOrder, deleteOrder, getSharePersonGroupByGmUuid, waitingPayOrderPay, updateActivityItemSpellOrder, createActivityItemSpellOrder } from "../../utils/api";

export default {
    data() {
        return {
            menuItems: ["待支付", "已支付", "已取消"],
            menuIndex: 0,
            waitingPayOrders: [],
            payOrders: [],
            canceledOrders: [],
            tempImageUrl: "http://jdc.jd.com/img/90x90/",
        };
    },

    onLoad() {
        this.loadOrder();
    },

    computed: {
        ...mapGetters({
            globalUserInfo: "personInfo/userInfo",
            organizationGateway: "globalInfo/organizationGateway",
            activity: "activityInfo/activity",
			defaultImageBase64: "globalInfo/defaultImageBase64",
        }),
    },

    methods: {
        onClickItem(e) {
            if (this.menuIndex !== e.currentIndex) {
                this.menuIndex = e.currentIndex;
            }
        },

        gotoToOrders(soUuid) {
            uni.navigateTo({ url: `/pages/my/order_detail?soUuid=${soUuid}` });
        },

        gotoShare(giUuid, ggUuid) {
            uni.navigateTo({ url: `/pages/activities/spell_order_detail?ggUuid=${ggUuid}&gpUuid=${this.activity.gpUuid}&giUuid=${giUuid}` });
        },

        async loadOrder() {
            if (!this.globalUserInfo.ciUuid) return;
            let res = await getOrderByCiUuid({ soCuid: this.globalUserInfo.ciUuid, soFrid: this.activity.gpUuid });
            if (res) {
                this.waitingPayOrders = res?.filter((item) => item.soStat === "待支付");
                this.payOrders = res?.filter((item) => item.soStat === "已支付");
                this.canceledOrders = res?.filter((item) => item.soStat === "已取消");
            }
        },

        async cancelOrder(item) {
            const that = this;
            uni.showModal({
                title: "确认要取消该订单吗？",
                success: async (res) => {
                    if (res.confirm) {
                        let res = await cancelOrder(item);
                        if (res) {
                            that.loadOrder();
                        }
                    }
                },
            });
        },

        async deleteOrder(item) {
            const that = this;
            uni.showModal({
                title: "确认要删除该订单吗？",
                success: async (res) => {
                    if (res.confirm) {
                        let res = await deleteOrder(item);
                        if (res) {
                            that.loadOrder();
                        }
                    }
                },
            });
        },

        async getWaitingpayOrderPay(item, type) {
            const that = this;
			item.soPric = Number(item.soPric)
            let res1 = await waitingPayOrderPay({ ...item, openid: this.globalUserInfo.openId });
            if (res1) {
                uni.requestPayment({
                    timeStamp: res1.timeStamp,
                    nonceStr: res1.nonceStr,
                    package: res1.package,
                    signType: res1.signType,
                    paySign: res1.paySign,
                    success: async (res) => {
                        let spRes =
                            type === "update"
                                ? await updateActivityItemSpellOrder({ soUuid: item.soUuid, ggUuid: item.ggUuid })
                                : await createActivityItemSpellOrder({ soUuid: item.soUuid });
                        if (spRes) {
                            uni.showToast({ title: "支付成功", icon:"success" });
                            that.loadOrder();
                        }
                    },
                    fail: function (res) {
                        uni.showToast({ title: "用户取消支付", icon:"error" });
                    },
                });
                return;
            }
        },

        async submitOrder(item) {
            if (item?.soGrou && item?.soScid) {
                let res = await getSharePersonGroupByGmUuid(item.soScid);
                if (res) {
                    let group = res.find((_item) => _item.groupMember.ggStat === false && _item.groupMember.giUuid === item.soItem);
                    if (group?.groupMember?.ggUuid) {
						item.ggUuid = group?.groupMember?.ggUuid
                        this.getWaitingpayOrderPay(item, "update");
                    }
                }
            }
            this.getWaitingpayOrderPay(item, "create");
        },
		
		getActivityItemImage(giPrph) {
			let path = "";
			if (typeof giPrph === "string") path = giPrph;
			else if (Array.isArray(giPrph) && giPrph.length > 1) {
				if (typeof giPrph[0] === "string") path = giPrph[0];
				else {
					if (new Date().getUTCTime() >= this.activity.gpStti) {
						const item = giPrph.find((item) => item.display === "3");
						path = item.path || "";
					} else {
						const item = giPrph.find((item) => item.display === "2");
						path = item.path || "";
					}
				}
			}
			else if (Array.isArray(giPrph) && giPrph.length === 1) {
				if (typeof giPrph[0] === "string") {
					path = giPrph[0];
				} else path = giPrph[0].path || "";
			}
			return path ? this.organizationGateway + "/file/download?filepath=" + path : this.defaultImageBase64;
		},
    },
};
</script>

<style lang="scss" scoped></style>
